<!DOCTYPE HTML>
<html>

<head>
	<meta charset="utf-8">
	<meta name="divport"
		content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no,email=no,date=no,aItemress=no">
	<title>选择支付方式</title>
	<link rel="stylesheet" type="text/css" href="../css/aui.css" />
	<link rel="stylesheet" type="text/css" href="../css/swiper.min.css" />
	<link rel="stylesheet" type="text/css" href="../css/app.css" />
	<style type="text/css">
		.content {
			width: 100%;
			height: auto !important;
		}

		.list-content {
			padding: 0 0.5rem;
			background-color: #FFFFFF;
		}

		.list-item {
			height: 2.5rem;
			display: flex;
			-webkit-box-orient: horizontal;
			-webkit-box-direction: normal;
			-webkit-flex-direction: row;
			flex-direction: row;
			justify-content: space-between;
			-webkit-box-align: center;
			-webkit-align-items: center;
			align-items: center;
		}

		.list-item .pay-icon {
			width: 2.1rem;
		}

		.list-item {
			flex: 1;
			font-size: 0.8rem;
			margin-left: 0.4rem;
			font-size: .75rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(16, 29, 55, 1);
		}

		.pay-channel {
			flex: 1;
			font-size: 0.75rem;
			margin-left: 0.75rem;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(89, 89, 89, 1);
			line-height: 2.5rem;
			text-shadow: 0rem 0rem 0rem rgba(230, 230, 230, 1);
		}

		.list-item .pay-icon-select {
			width: 1rem;
		}

		.aui-btn-block {
			height: 2.3rem;
			line-height: 2.3rem;
			width: 92%;
			margin: auto;
			color: #FFFFFF;
			background: rgba(0, 90, 147, 1);
			border-radius: 0.3rem;
			font-family: PingFangSC-Regular;
			font-weight: 400;
			color: rgba(255, 255, 255, 1);
			transition: 0.3s all ease
		}

		.aui-btn-block:active {
			background: rgba(0, 90, 147, 0.8);
			color: #fff
		}

		.btn-frame {
			margin: 2.5rem 0.5rem 0rem 0.5rem;
		}

		.list {
			background: rgb(250, 213, 180);
		}

		.list .item {
			float: left;
			box-sizing: border-box;
			border: 1px solid red;
			width: 33%;
			padding: 10px 10px;
			text-align: center;
		}

		.list .item .input {
			display: flex;
			align-items: center;
			justify-content: center;
			border-bottom: 1px dashed #dddddd;
			margin: 60rpx auto 0 auto;
			padding-bottom: 20rpx;
			font-size: 56rpx;
			color: #333333;
			flex-wrap: nowrap;
		}

		.list .item .input text {
			padding-left: 106rpx;
		}

		.list .item .input input {
			padding-right: 106rpx;
			width: 300rpx;
			height: 94rpx;
			text-align: center;
			font-size: 70rpx;
		}

		.list img {
			width: 100%;
		}

		.list .title {
			padding: 3px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.clear {
			clear: both;
		}
	</style>
</head>

<body>
	<div id="app" v-cloak="">

		<div class="list">
			<div class="item" v-for="i in recharge_quota">
				<div class="img">
					{{i.price}}元
				</div>
				<div class="title">
					{{i.give_money}}元
				</div>
			</div>
			<div class="item">
				<div class="img">
					<input type="text" class="input">
					 </div>
					<div class="title">
						<!-- {{i.give_money}}元 -->
					</div>
				</div>
				<!-- 清除浮动 -->
				<div class="clear"></div>
			</div>


			<div class="list-content">
				<!-- 微信支付 -->
				<div class="list-item aui-border-b" tapmode @click="channel='Wxpay'">
					<div class="">
						<img class="pay-icon" src="../../image/btn/btn-weixin1.png" style="width:1.2rem;">
					</div>
					<div class="pay-channel">
						微信支付

					</div>
					<div style="padding-right:.5rem;">
						<img v-if="channel=='Wxpay'" class="pay-icon-select" src="../../image/icon/select_new.png"
							style="width:.95rem;">
						<img v-if="channel!='Wxpay'" class="pay-icon-select"
							src="../../image/icon/icon-noselect-red.png" style="width:.95rem;">
					</div>
				</div>

				<!-- 支付宝支付 -->
				<div class="list-item aui-border-b" tapmode @click="channel='Alipay'">
					<div class="">
						<img class="pay-icon" src="../../image/btn/btn-alipay.png" style="width:1.2rem;">
					</div>
					<div class="pay-channel">
						支付宝支付
					</div>
					<div style="padding-right:.5rem;">
						<img v-if="channel=='Alipay'" class="pay-icon-select" src="../../image/icon/select_new.png"
							style="width:.95rem;">
						<img v-if="channel!='Alipay'" class="pay-icon-select"
							src="../../image/icon/icon-noselect-red.png" style="width:.95rem;">
					</div>
				</div>

				<!-- 网银支付 -->
				<div class="list-item aui-border-b" tapmode @click="channel='UnionPay'">
					<div class="">
						<img class="pay-icon" src="../../image/btn/btn-yinlian.png" style="width:1.2rem;">
					</div>
					<div class="pay-channel">
						银联支付
					</div>
					<div style="padding-right:.5rem;">
						<img v-if="channel=='UnionPay'" class="pay-icon-select" src="../../image/icon/select_new.png"
							style="width:.95rem;">
						<img v-if="channel!='UnionPay'" class="pay-icon-select"
							src="../../image/icon/icon-noselect-red.png" style="width:.95rem;">
					</div>
				</div>
				<!-- 余额支付 -->
				<div class="list-item aui-border-b" tapmode @click="channel='balance'">
					<div class="">
						<img class="pay-icon" src="../../image/btn/ye.png" style="width:1.2rem;">
					</div>
					<div class="pay-channel">
						余额支付
					</div>
					<div style="padding-right:.5rem;">
						<img v-if="channel=='balance'" class="pay-icon-select" src="../../image/icon/select_new.png"
							style="width:.95rem;">
						<img v-if="channel!='balance'" class="pay-icon-select"
							src="../../image/icon/icon-noselect-red.png" style="width:.95rem;">
					</div>
				</div>

			</div>
			<!--<div class="btn-frame" tapmode onclick="open_win('pay','pay.html',false)">-->
			<div class="btn-frame" tapmode onclick="pay()">
				<div class="aui-btn aui-btn-block aui-font-size-16">
					确定
				</div>
			</div>
		</div>
</body>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/vue.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script>
	var vm = new Vue({
		el: '#app',
		data: {
			order_num: 0,
			pay_price: 0,
			channel: 'Alipay',
			order_id: 0,
			recharge_quota: [
				{
					"id": 311,
					"price": "0.01",
					"give_money": "1"
				},
				{
					"id": 286,
					"price": "0.01",
					"give_money": "20"
				},
				{
					"id": 181,
					"price": "1000.00",
					"give_money": "300"
				},
				{
					"id": 180,
					"price": "500.00",
					"give_money": "50.00"
				},
				{
					"id": 179,
					"price": "50.00",
					"give_money": "5.00"
				},
				{
					"id": 178,
					"price": "30.00",
					"give_money": "3.00"
				},
				{
					"id": 177,
					"price": "20.00",
					"give_money": "2.00"
				}
			],
		},
		methods: {
			price_format: function (type, price) {
				var status = (price + '').indexOf('.')
				if (status == '-1') {
					if (type == 'yuan') {
						return price;
					}
					if (type == 'fen') {
						return '00';
					}
				}
				var price_array = (price + '').split('.')
				if (type == 'yuan') {
					return price_array[0];
				}
				if (type == 'fen') {
					var price_fen = price_array[1].length < 2 ? price_array[1] + '0' : price_array[1];
					return price_fen;
				}
			},
		}
	})
	apiready = function () {
		// vm.order_num = $api.getStorage('orderinfo').order_num
		// vm.pay_price = $api.getStorage('orderinfo').pay_price / 100
		// vm.order_id = $api.getStorage('orderinfo').order_id
	};

	function pay() {
		var channel = vm.channel
		get_data('payment/Pay/getOrderSign', {
			order_id: vm.order_id,
			order_type: channel
		}, function (ret) {
			// alert(JSON.stringify(ret))
			if (ret.status) {
				if (ret.status == '99' && ret.msg == '订单处理成功') {
					pay_res(1);
					send_event('order_chang')
					setTimeout(function () {
						close_win()
					}, 1000)
					return;
				}
				var orderinfo = ret.order;
				if (channel == 'Wxpay') {
					//console.log(JSON.stringify(ret.data.payOrder))
					var wxPay = api.require('wxPayPlus');
					wxPay.payOrder(ret.data.payOrder, function (ret, err) {
						console.log(JSON.stringify(ret))
						if (ret.status) {
							pay_res(1)
							send_event('order_chang')
							setTimeout(function () {
								close_win()
							}, 1000)
						} else {
							if (err.code == '-2')
								pay_res(0)
							setTimeout(function () {
								close_win()
							}, 1000)
						}
					});
				}
				if (channel == 'Alipay') {
					var alipay = api.require('aliPayPlus');
					alipay.payOrder({
						orderInfo: ret.data.payOrder
					}, function (ret, err) {
						if (ret.code == '9000') {
							pay_res(1)
							send_event('order_chang')
							if (api.systemType != 'android') {
								close_win()
							}
							setTimeout(function () {
								close_win()
							}, 1000)
						} else if (ret.code == '4006') {
							pay_res(0)
							if (api.systemType != 'android') {
								close_win()
							}
							setTimeout(function () {
								close_win()
							}, 1000)
						} else if (ret.code == '4003') {
							pay_res(0)
							if (api.systemType != 'android') {
								close_win()
							}
							setTimeout(function () {
								close_win()
							}, 1000)
							//								toast('您绑定的支付宝账户被冻结或不允许支付');
						} else if (ret.code == '6000') {
							pay_res(0)
							if (api.systemType != 'android') {
								close_win()
							}
							setTimeout(function () {
								close_win()
							}, 1000)
							//								toast('支付服务正在进行升级操作');
						} else if (ret.code == '6001') {
							pay_res(0)
							if (api.systemType != 'android') {
								close_win()
							}
							setTimeout(function () {
								close_win()
							}, 1000)
							//								toast('您已取消付款');
						}
					});
				}
				if (channel == 'UnionPay') {
					var unPay = api.require('unionPay');
					unPay.pay({
						tn: ret.data.tn,
						devMode: true
					}, function (ret, err) {
						if (ret.result == 'success') {
							pay_res(1)
							send_event('order_chang')
							if (api.systemType != 'android') {
								close_win()
							}
							setTimeout(function () {
								close_win()
							}, 1000)
						} else {
							pay_res(0)
							if (api.systemType != 'android') {
								close_win()
							}
							setTimeout(function () {
								close_win()
							}, 1000)
						}
					});
				}
			} else {
				toast(ret.msg)
			}
		})
	}

	function pay_res(res, orderinfo) {
		send_event('tuan_ref')
		$api.setStorage('pay_res', res)
		open_win('pay', 'pay.html', false)
	}
</script>

</html>